<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>商品分类</title>
<link rel="stylesheet" href="__PUBLIC__/Mobile/css/page.css">
<script src="__PUBLIC__/Mobile/js/jquery-1.7.2.min.js"></script>
<script src="__PUBLIC__/Mobile/layer/layer.min.js"></script>
<style>
li{	width:100%;	text-align:center;	background:#fefefe; line-height:40px; background-color:#f2f2f2;	cursor: pointer;border-bottom: 1px solid #e4e4e4;overflow:hidden; border-left:5px solid #f2f2f2;}
</style>

</head>

<body>
<!-- 头 -->
<div class="top">
<img src="__PUBLIC__/Mobile/images/return.png" width="44" height="44">
<div class="search">
  <img src="__PUBLIC__/Mobile/images/search.png" width="44" height="44">
  <input name="" type="text">
  </div>
  <img src="__PUBLIC__/Mobile/images/share.jpg" width="58" height="19" style="margin-top:15px;">
</div>
<!-- 导航 -->
<div class="navigation">
	<a href="#" class="Home">首页 </a>
	<a href="#" class="search2 hover">分类搜索 </a>
	<a href="#" class="shopping"> 购物车  </a>
	<a href="#" class="mine"> 我的莫宁 </a>
</div>
<!-- 分类 -->
<div class="Complete" style="height:50px; line-height:50px; font-size:16px;">
  <a href="javascript:history.back(-1);"><img src="__PUBLIC__/Mobile/images/cls_left1s.png" style="height:20px; line-height:20px;padding-right:2%;"></a>
  <span>全部分类</span>
</div>
<div id="box" >
<ul class="Directory">
<volist name="resone" id="vv" key="k">
    <li class="page"  id="{$vv.id}">{$vv.class_name}</li><!-- class="active" -->
</volist>    
</ul>
<div class="div2" >
	<ul class="Switching">       
        	<div id="aa"></div>
        	<div id="bb"></div>
    </ul>
    <div id="first">
    	<ul class="Switching">
    	<volist name="find" id="va">
	    	<h3 style="text-align:center;line-height:40px;color:#ffffff;; font-size:1.2em;background:#43C475;">{$va.class_name}</h3>
	    	<volist name="va.vo" id="vd">
		        <a href="{:U('Goods/goods_details')}?id={$vd.id}">
		        <img src="__PUBLIC__/Uploads/goods/{$vd.pic_url}" width="111" height="111">
		<p style="height:30px;">{$vd.title|substr=0,10}</p>
		        </a>
		    </volist>
       </volist> 
    </ul>
    </div>
</div>
<br style="clear:both" />
</div>
</body>

<script>

	$(".page").click(function(){
		var pageid =  $(this).attr("id");
		var div_aa = "";
		var div_bb = "";
       $.ajax({
                url: "{:U('Goods/goods_pagelist')}",
                type: "GET",
                data: {pageid:pageid},
                dataType: "json",
                success: function(result){
                	//console.log(result);
                	var results=eval('('+result+')');
                	 $.each(results,function(i){
                		 //alert(results[i].vo.id);
		               	div_aa += '<h3 style="text-align:center;line-height:40px;color:#ffffff;; font-size:1.2em;background:#43C475;">'+results[i].class_name+'</h3>';
		               	$.each(results[i].vo,function(j){
		               		//alert(results[i].vo[j].pic_url)
		               		div_bb +='<a href="{:U('Goods/goods_details')}?id='+results[i].vo[j].id+'">'+
		               		'<img src="__PUBLIC__/Uploads/goods/'+results[i].vo[j].pic_url+'"style="width:100px; height:100px;" />'+
		               		'<p style="hefight:30px;">'+results[i].vo[j].title.substring(0,10)+'</p></a>';
		               	});
		               	$('#bb').html(div_bb); 
                	});
                	$('#aa').html(div_aa); 
                }
        });
       $(this).siblings().removeClass("active").end().addClass ("active");
       $('#first').remove();
	});
</script>

</html>
